<template>
	<view class="container">
		<view class="cell flex-b flex-ac">
			<view class="hd"><text style="color: red;">*</text>投诉类型</view>
			<view class="md" @click="show = true" style="text-align: right; flex: 1;">
				<input type="text" disabled="" v-model="form.complaintType" placeholder="请选择" placeholder-style="color: #cccccc;"/>
			</view>
			<image src="../../../static/img/yjt.png" class="more" mode=""></image>
		</view>
		<u-picker mode="selector" v-model="show" title="投诉类型" :range="selector" range-key="complaintType" confirm-color='#3DB020' @confirm="getTsType"></u-picker>
		
		<view class="cell">
			<view class="hd"><text style="color: red;">*</text>投诉内容</view>
			<view class="textareaBox">
				<textarea placeholder-style="color: #CCCCCC" v-model="form.complaintContent" placeholder="请输入投诉内容"></textarea>
				<view class="clear" @click="form.complaintContent = ''">清空</view>
			</view>
		</view>

		<view class="cell" style="border: none;">
			<view class="hd">图片</view>
			<u-gap height="30"></u-gap>
			<view class="imageBox flex-wrap">
				<view class="imageItem" v-for="(item,index) in images" :key="index" @click="$Common.viewImage(images, index)">
					<image class="image" :src="item" mode=""></image>
					<image src="../../../static/img/del.png" class="del" @click.stop="delImage(index)" mode="aspectFill"></image>
				</view>
				<view class="imageItem" @click="chooseImg" v-if="images.length < 10">
					<image class="image" src="../../../static/img/upload.png" mode=""></image>
					<view class="text">点击上传</view>
				</view>
			</view>
		</view>

		<view class="foot" style="position: fixed; left: 0; bottom: 0;">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="sureComplaint()">提交</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
	</view>
</template>

<script>
	import config from '@/utils/config.js'
	// 引入高德地图sdk
	// import amap from '@/utils/amap-wx.130.js';
	export default {
		data() {
			return {
				id: '',
				show: false,
				form: {
					complaintContent:"",  // 投诉内容【必须】
					complaintType:"",  // 投诉类型【必须】
					shippingNoteNumber:"",  // 托运单号【必须】
					complaintImgs: '' // 投诉图片，多个用","隔开
				},
				selector:[],
				images: [],
				imagesId: [],
			}
		},
		onLoad(opt) {
			if (opt) console.log('opt:', opt)
			this.id = opt.id
			this.form.shippingNoteNumber = opt.id
			this.getSelector()
		},
		methods: {
			// 确认装货
			sureComplaint() {
				if (this.form.complaintContent === '') return this.$Toast.message('请输入投诉内容')
				if (this.form.complaintType === '') return this.$Toast.message('请选择投诉类型')
				if (this.images.length > 0) {
					this.form.complaintImgs = this.imagesId.toString()
				}
				console.log('form:', this.form)
				this.$Net.post('/consignorApi/transportComplaint/add', this.form).then(res => {
					console.log('投诉：', res)
					this.$Toast.messageIcon('操作成功')
					setTimeout(() => {
						this.$Jump.Back(1)
					}, 1500)
				})
			},
			// 选择投诉类型
			getTsType(e){
				console.log(e)
				this.form.complaintType = this.selector[e[0]].complaintType
			},
			
			// 获取订单信息  /consignorApi/transportComplaintType/listBySelect
			getSelector() {
				this.$Net.get('/consignorApi/transportComplaintType/listBySelect').then(res => {
					console.log('投诉类型:', res)
					this.selector = res.data
				})
			},
			// 删除图片
			delImage(index) {
				this.images.splice(index, 1)
				this.imagesId.splice(index, 1)
			},
			//  选择图片
			chooseImg: function() {
				var that = this
				uni.chooseImage({
					count: 9, // 默认9
					// sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						let tempFilePaths = res.tempFilePaths;
						console.log('tempFilePaths:', tempFilePaths)
						tempFilePaths.map(el => {
							that.uploadImg(el)
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: '需要从您的相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				});
			},
			// 上传图片
			uploadImg(imageUrl) {
				return new Promise((resolve, reject) => {
					var that = this
					uni.uploadFile({ //上传
						url: config.BASE_URL + '/sysFileInfo/upload',
						filePath: imageUrl,
						name: "file",
						header: {
							// "Content-Type": "multipart/form-data",
							'authorization': uni.getStorageSync('token')
						},
						formData: {
							// 'fileBucket': 'ndbl-files',
							'secretFlag': 'Y',
							// 'file': 'MultipartFile'
						},
						success(res) {
							let data = JSON.parse(res.data)
							console.log('图片上传:', data)
							that.images.push(data.data.fileUrl)
							that.imagesId.push(data.data.fileId)
							// console.log('images:', that.images)
							// console.log('imagesId:', that.imagesId)
						},
						fail(res) {
							reject(res);
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.cell{
		width: 100%;
		padding: 34rpx 30rpx;
		color: #333;
		font-weight: bold;
		// align-items: flex-start;
		font-size: 30rpx;
		border-bottom: 1rpx solid #F5F7FB;
		.textareaBox{
			width: 100%;
			height: 220rpx;
			padding-top: 30rpx;
			position: relative;
			.clear{
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				color: #999999;
				font-size: 30rpx;
				z-index: 999999;
			}
			textarea{
				width: 100%;
				height: 100%;
				font-size: 30rpx;
				color: #333;
			}
		}
		.bn-btn{
			width: 130rpx;
			height: 70rpx;
			background: #f7f7f7;
			border-radius: 6rpx;
			color: #999;
			font-size: 30rpx;
		}
		.bn-btn:first-child{
			margin-right: 20rpx;
		}
		.sel{
			color: #3DB020;
			border: 2rpx solid #3cb020;
		}
		.bd{
			width: 60%;
			text-align: right;
			color: #3F4151;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}
		}
		.imageBox{
			width: 100%;
			.imageItem{
				width: 200rpx;
				height: 200rpx;
				margin-right: 40rpx;
				margin-bottom: 20rpx;
				position: relative;
				.image{
					width: 100%;
					height: 100%;
				}
				.del{
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: -14rpx;
					right: -14rpx;
				}
				.text{
					color: #ACAFBF;
					font-size: 26rpx;
					width: 100%;
					position: absolute;
					top: 130rpx;
					left: 50%;
					transform: translate(-50%,-50%);
					text-align: center;
				}
			}
			.imageItem:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	
	.btn{
			width: 688rpx;
			height: 100rpx;
			background: #1784fc;
			border-radius: 10rpx;
			color: #fff;
			font-size: 30rpx;
			margin: 0 auto;
			margin-top: 80rpx;
			line-height: 1;
	}
	
	
	
</style>